import React from 'react'
import PropTypes from 'prop-types'

import { inject, observer } from 'mobx-react'
import { withStyles } from 'material-ui/styles'
import Badge from 'material-ui/Badge';
import MailIcon from 'material-ui-icons/Mail';

import UserStore from '../../stores/user_store'

import createStyle from './style'


@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class UserCenter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      recentTopics: [],
      recentReplies: [],
      user: { },
      collection: [],
    }
  }
  componentDidMount() {
    this.onLoad()
  }
  onLoad() {
    this.getMessageCount()
  }
  getMessageCount() {
    const { user } = this.props
    user.getMessageCount()
  }
  render() {
    const {
      classes,
      className,
    } = this.props
    const { userMessageCount } = this.props.user
    return (
      <Badge
        className={className}
        badgeContent={
          <span className={classes.badgeCount}>
            {userMessageCount}
          </span>
        }
        color="primary"
      >
        <MailIcon />
      </Badge>
    )
  }
}
export default withStyles(createStyle)(UserCenter)
UserCenter.propTypes = {
  classes: PropTypes.objectOf(Object),
  user: PropTypes.instanceOf(UserStore),
  className: PropTypes.string,
}
